import react from "react";

import "./count.css"

class Count extends react.Component{

    // checkAllTodo
    dealOnchange = (event)=>{
        // console.log(event.target.checked);
        this.props.checkAllTodo(event.target.checked);
    }

    dealDeleteDone = ()=>{
        this.props.deleteDowns();
    }

    render(){
        const {todos} = this.props;
        const overNumber = todos.reduce(
            (pre,todo)=>{
            return pre + (todo.done ? 1 : 0)},0)
        const allNumber = todos.length;
        return (
            <div className="count">
                <div>
                    <input type="checkbox" onChange={this.dealOnchange} checked={overNumber === allNumber ? true : false}></input>
                    <span className="content">已完成
                        <label>{overNumber} </label>
                        <span> / </span> 
                        <span>总共</span>
                        <label>{allNumber}</label>
                    </span>
                </div>
                <button className="blueButton" onClick={this.dealDeleteDone}>删除全部已完成的任务</button>
            </div>
        )
    }
}

export default Count;